<template>
    <view>
        <template v-for="(value,key) in roomList">
            <view class="s_name">{{value.s_name}}（共{{value.count}}间）</view>
            <template v-for="(val,k) in value.children">
                <u-divider :text="val.build_name"></u-divider>

                <view class="box">
                    <view class="box-an-light" :class="{'active':key === showIndex1 && k === showIndex2 && index === showIndex3}" @click="clickBoxHandler(key,k,index)" v-for="(item,index) in val.children">
                        <u-row>
                            <u-col textAlign="center" span="9">
                                <u-text :lines="1" :color="key === showIndex1 && k === showIndex2 && index === showIndex3 ? '#f4f4f5' : '#606266'"
                                         :text="item.room_num + '-' + item.join_room_name" size="16"
                                         bold align="left"></u-text>
                            </u-col>
                            <u-col textAlign="center" span="3">
                                <text v-if="item.type === 1" class="tag">公寓</text>
                                <text v-if="item.type === 2" class="tag">合租</text>
                                <text v-if="item.type === 3" class="tag">整租</text>
                            </u-col>
                        </u-row>
                        <view style="margin: 10px 0;">
                            <u-text :lines="1" mode="price" :color="key === showIndex1 && k === showIndex2 && index === showIndex3
                                    ? '#f4f4f5':'#606266'" :text="item.lease_priec" size="14" align="left"></u-text>
                        </view>

                        <view style="margin: 10px 0;">
                            <text v-if="item.rent_type===1" style="color: #fff;margin-left: 2px;background-color: #09BB07;padding: 2px 5px;"> 空</text>
                            <text v-if="item.owe===2" style="color: #fff;margin-left: 2px;background-color: #fa3534;padding: 2px 5px;"> 欠</text>
                            <text v-if="item.rent_type===2" style="color: #fff;margin-left: 2px;background-color: #09BB07;padding: 2px 5px;"> 已</text>
                        </view>
                    </view>
                </view>
            </template>
        </template>

        <u-popup :show="active" @close="close" closeOnClickOverlay>
            <view style="margin-top: 20px;">
                <view style="display: flex;align-items: center;justify-content: space-between;">
                    <text style="padding: 5px ;">{{info.room_num + '-' + info.join_room_name}} | ￥{{info.lease_priec}}</text>
                    <!--<view style="margin-right: 20px;"><text style="margin-right: 10px;">{{usersex}}</text>{{username}}</view>-->
                </view>
                <view style="padding: 5px ;margin-top: 10px;">
                    <text v-if="info.rent_type===1" style="color: #fff;margin-left: 2px;background-color: #09BB07;padding: 2px 5px;"> 空</text>
                    <text v-if="info.owe===2" style="color: #fff;margin-left: 2px;background-color: #fa3534;padding: 2px 5px;"> 欠</text>
                    <text v-if="info.rent_type===2" style="color: #fff;margin-left: 2px;background-color: #09BB07;padding: 2px 5px;"> 已</text>
                    <!--<text style="margin-left: 5px;">{{info.text}}</text>-->
                </view>

                <view style="display: flex;align-items: center;justify-content: flex-end;">
                    <view style="margin: 10rpx 20rpx">
                        <u-tag type="warning" plain text="房源详情" @click="houseDetail"></u-tag>
                    </view>
                    <view style="margin: 10rpx 20rpx" v-if="info.rent_type === 1">
                        <u-tag type="primary" plain text="租客登记" @click="tenantRegister"></u-tag>
                    </view>

                    <view style="margin: 10rpx 20rpx" v-if="info.rent_type === 2">
                        <u-tag type="primary" plain text="查看租约" @click="checkLease"></u-tag>
                    </view>
                </view>
            </view>
        </u-popup>
        <u-gap height="40"></u-gap>
    </view>
</template>

<script>
    import RoomItem from './RoomItem';
    export default {
        name: "RoomList",
        props:{
            houseList: {
                type: Array,
                default :[]
            }
        },
        components:{
            RoomItem,
        },
        computed:{
            roomList(){
                let data = uni.$u.deepClone(this.houseList);
                for (let i = 0; i < data.length; i++) {
                    let count = 0;
                    for (let j = 0; j < data[i].children.length; j++) {
                        count+= data[i].children[j].children.length;
                    }
                    data[i].count = count;
                }
                return data;
            },
        },
        data(){
            return{
                active: false,
                showIndex1: '',
                showIndex2: '',
                showIndex3: '',
                info:{
                    join_room_name: "1009-A",
                    room_num:'333',
                    rent_price: "300",
                    type: 2,
                    rent_type: 1,
                    text: "当前已空置29天了",
                    owe: "2",
                },
            };
        },
        methods:{
            clickBoxHandler(key1,key2,key3){
                this.info = this.houseList[key1].children[key2].children[key3];
                this.showIndex1 = key1;
                this.showIndex2 = key2;
                this.showIndex3 = key3;
                this.active = true;
            },
            close(){
                this.active = false;
                this.showIndex1 = '';
                this.showIndex2 = '';
                this.showIndex3 = '';
            },
            tenantRegister(){
                this.close();
                let s_name = this.info.s_name + '-' + this.info.building + '栋' + this.info.unit + '单元' + this.info.room_num;
                let data = {h_id: this.info.id,s_name: s_name,z_id: this.info.z_id};
                uni.navigateTo({url:'/pages/landlord/library/tenant' + uni.$u.queryParams(data)});
            },
            houseDetail(){
                this.close();
                uni.navigateTo({url:'/pages/landlord/library/detail?info=' + JSON.stringify(this.info)});
            },
            checkLease(){
                this.close();
                let data = {h_id: this.info.id, z_id: this.info.z_id};
                uni.navigateTo({url:'/pages/landlord/library/lease' + uni.$u.queryParams(data)});
            },
        }
    }
</script>

<style lang="scss" scoped>
    .s_name{
        text-align: center;
        font-size: 30rpx;
        background-color: #fff;
        padding: 20rpx 0;
        /*color: #909399;*/
        color: #666;
        margin: 20px 0;
    }
    .s_name:first-child{
        margin:0;
    }

    .box{
        display: flex;
        opacity: 0.9;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .box{
        .box-an-light:first-child{
            margin-left: 2rpx;
        }
    }
    .box-an-light{
        background-color: #D5FAF2;
        width: 222rpx;
        padding: 10rpx;
        margin-left: 4rpx;
        margin-bottom: 5rpx;
        border: 1rpx solid darkseagreen;

        .tag{
            background-color:#999;
            opacity: 0.8;
            padding: 5rpx;
            font-size: 22rpx;
            color: #ffffff;
        }
    }


    .active{
        background-color: #3c9cff;
    }
</style>